---
title: VerticalPolyEdgeRenderer 折线边渲染器
icon: Workflow
relatedFile: app/src/core/render/canvas2d/entityRenderer/edge/concrete/VerticalPolyEdgeRenderer.tsx
---

`VerticalPolyEdgeRenderer` 服务用于渲染折线边缘。它继承自 `EdgeRendererClass`，专门处理图形中连接节点之间的折线（多段线）的视觉呈现。

## API

### 构造函数

基于 `Project` 实例进行初始化，`Project` 提供了渲染所需的上下文和工具。

### 效果生成 API

#### `getCuttingEffects(edge: LineEdge): Effect[]`

根据给定的 `LineEdge`（线段边缘），生成一系列切割效果。这些效果通常在边缘被“切割”或断开时显示，例如：

-   `LineCuttingEffect`: 沿边缘的起始点和结束点方向的切割线效果。
-   `CircleFlameEffect`: 在边缘中点产生的圆形火焰效果。

#### `getConnectedEffects(startNode: ConnectableEntity, toNode: ConnectableEntity): Effect[]`

当两个可连接实体（节点）连接时，生成一系列连接效果。这些效果旨在视觉上强调连接的建立，例如：

-   `CircleFlameEffect`: 在起始节点的碰撞框中心产生的圆形火焰效果。
-   `LineCuttingEffect`: 在起始节点和目标节点中心之间产生的切割线效果。

### 辅助计算 API

#### `getVerticalDirection(edge: LineEdge): Vector`

计算起始点相对于目标点的垂直方向向量。这个方法根据起始点和目标点的位置关系，判断起始点是位于目标点的左上、左下、右上、右下等区域，并返回一个表示垂直或水平方向的单位向量。

#### `gaussianFunction(x: number)`

一个高斯函数，用于计算一个基于输入 `x` 的衰减值，通常用于平滑过渡或计算权重。

### 渲染 API

#### `renderNormalState(edge: LineEdge): void`

渲染处于正常状态的 `LineEdge`。

-   如果边缘没有文本：
    -   根据 `getVerticalDirection` 计算的垂直方向，渲染多段线。
    -   根据源节点和目标节点的相对位置，计算偏离距离和附加高度，以调整折线的形状。
    -   在目标节点处渲染箭头。
-   如果边缘有文本：
    -   在边缘中点渲染文本。
    -   渲染从边缘起始点到文本框边缘，以及从文本框边缘到边缘结束点的线段。
    -   在边缘结束点渲染箭头。

#### `renderShiftingState(edge: LineEdge): void`

渲染处于“移动中”状态的 `LineEdge`。这种状态下，边缘可能有一个中间点 `shiftingMidPoint`，表示边缘正在被拖动或调整。

-   渲染从源节点到 `shiftingMidPoint`，再到目标节点的线段。
-   如果边缘有文本，则在 `shiftingMidPoint` 渲染文本，并调整线段以避开文本框。
-   渲染箭头。

#### `renderCycleState(edge: LineEdge): void`

渲染自环（循环）状态的 `LineEdge`。

-   在目标节点位置渲染一个弧线，模拟自环。
-   在弧线末端渲染箭头。

#### `renderVirtualEdge(startNode: ConnectableEntity, mouseLocation: Vector): void`

渲染一个虚拟边缘，通常用于用户拖动创建新边缘时的预览。

-   渲染从起始节点的中心到鼠标当前位置的渐变线。

#### `renderVirtualConfirmedEdge(startNode: ConnectableEntity, endNode: ConnectableEntity): void`

渲染一个虚拟的已确认边缘，通常用于用户完成边缘创建操作后的短暂视觉反馈。

-   渲染从起始节点的中心到结束节点中心的渐变线。

### SVG 生成 API

#### `getNormalStageSvg(edge: LineEdge): React.ReactNode`

生成正常状态下 `LineEdge` 的 SVG 表示。

-   如果边缘没有文本，生成一条直线 SVG。
-   如果边缘有文本，生成文本 SVG，并生成两条线段 SVG（从起始点到文本框边缘，从文本框边缘到结束点）。
-   生成箭头 SVG。

#### `getCycleStageSvg(): React.ReactNode`

生成自环状态下 `LineEdge` 的 SVG 表示。目前返回一个空的 `React.ReactNode`。

#### `getShiftingStageSvg(): React.ReactNode`

生成“移动中”状态下 `LineEdge` 的 SVG 表示。目前返回一个空的 `React.ReactNode`。

### 内部辅助 API

#### `renderTest(edge: LineEdge)`

一个用于调试和测试的渲染方法，会在边缘的目标节点周围渲染一些测试线段。

#### `renderArrowHead(edge: LineEdge, direction: Vector, endPoint = edge.bodyLine.end.clone())`

一个私有方法，用于在给定 `endPoint` 和 `direction` 的情况下渲染箭头。
